<template>
  <view>
    <view
      class="empty-car"
      v-if="isEmpty"
    >
      <image src="/static/img/kong.png" />
      <text class="empty-car-tips">购物车还是空的</text>
      <text class="empty-car-tips extra">快去逛逛吧~</text>
    </view>
    <view v-else>
      <!-- 头部 -->
      <view class="shop-head">
        <view class="shop-head-info">
          <view class="iconfont icon-shop flex-center icon-dianpu"></view>
          <text class="shop-name">品优购生活馆</text>
        </view>
      </view>
      <block
        v-for="(item,index) in goodsList"
        :key="item.goods_id"
      >
        <view class="goods-item">
          <!-- 左边的选中的图片 -->
          <view
            @click="toggleSelect(index)"
            :class="['pubIcon',item.isSelect ? 'trueIcon' : 'falseIcon']"
          ></view>
          <!-- 图片 -->
          <view class="goods-item-pic">
            <image :src="item.goods_small_logo" />
          </view>
          <view class="goods-item-info">
            <text class="goods-item-info-title">{{item.goods_name}}</text>
            <text class="goods-item-info-price">￥{{item.goods_price}}</text>
            <view class="goods-item-info-edit">
              <view class="outer">
                <view
                  @click="substrict(item)"
                  :style="{'color':item.goods_number > 1 ? 'black':'#ccc'}"
                >-</view>
                <view class="value"><input
                    style="font-size:12px;color:#999;"
                    v-model="item.goods_number"
                    type="number"
                  /></view>
                <view
                  @click="add(item)"
                  class="add"
                >+</view>
              </view>
              <text @click="deleteGoods(index)">| 删除</text>
            </view>
          </view>
        </view>
      </block>
      <!-- 底部菜单栏 -->
      <view class="fixed-bar">
        <view
          @click="toggleAllSelect"
          class="allselect"
        >
          <view :class="['pubIcon',allSelected?'trueIcon':'falseIcon']">
          </view>
          <text style="margin-left:10rpx;">全选</text>
        </view>
        <view class="statistics">
          <view>
            <text>合计：</text>
            <text style="color:#ff2d4a;font-size:30rpx;">￥{{getTotalAmount}}</text>
          </view>
          <text>包含运费</text>
        </view>
        <view
          @tap="goToOrder"
          :class="['jiesuan',getTotalCount===0?'disabled':'']"
        >
          <text>去结算 ({{getTotalCount}})</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 导入storage中的方法
import { getLocalGoods, updateGoods,deleteGoods } from '../../utils/storage'
export default {
  data() {
    return {
      isEmpty: false,
      goodsList: [], //商品列表
      allSelected: true //是否全选， 默认为true
    }
  },
  onShow() {
    this.getGoodsListData()
  },
  computed: {
    getTotalAmount() {
      let totalAmount = 0
      this.goodsList.forEach(item => {
        if (item.isSelect) {
          totalAmount += item.goods_price * item.goods_number
        }
      })

      return totalAmount
    },
    getTotalCount() {
      let totalCount = 0
      this.goodsList.forEach(item => {
        if (item.isSelect) {
          totalCount += item.goods_number
        }
      })

      return totalCount
    }
  },
  methods: {
    async getGoodsListData() {
      //1、先获取本地的商品id
      // localGoods === {"129":2,"38":1}
      const localGoods = getLocalGoods()

      // ["129","38"]
      const ids = Object.keys(localGoods)

      if (ids.length === 0) {
        this.isEmpty = true
        return
      }

      this.isEmpty = false
      this.allSelected = true

      //2、发送网络请求
      const res = await this.$axios.get(
        `goods/goodslist?goods_ids=${ids.join(',')}`
      )

      // 先处理好数据
      res.data.message.forEach(item => {
        item.goods_number = localGoods[item.goods_id]
        item.isSelect = true
      })

      // 赋值
      this.goodsList = res.data.message
    },
    // 全选和反选
    toggleAllSelect() {
      // 让它自身取反
      this.allSelected = !this.allSelected

      // 让列表中的状态，和我下面的一致
      this.goodsList.forEach(item => {
        item.isSelect = this.allSelected
      })
    },
    // 某一行的选中与反选
    toggleSelect(index) {
      // 让它自身取反
      this.goodsList[index].isSelect = !this.goodsList[index].isSelect

      // 默认给它赋一个值
      let allSelect = true
      this.goodsList.some(item => {
        if (!item.isSelect) {
          allSelect = false

          // 终止当前的循环
          return true
        }
      })

      this.allSelected = allSelect
    },
    // 商品数量的 + 商品数量的 -
    add(item) {
      item.goods_number++

      updateGoods({
        goods_id: item.goods_id,
        goods_number: item.goods_number
      })
    },
    substrict(item) {
      if (item.goods_number <= 1) return

      item.goods_number--

      updateGoods({
        goods_id: item.goods_id,
        goods_number: item.goods_number
      })
    },
    deleteGoods(index) {
      mpvue.showModal({
        title: '提示',
        content: '确定删除该商品吗?',
        confirmColor:'#ff2d4a',
        success: res => {
          if (res.confirm) {
              // 获取要删除的商品id
              const goods_id = this.goodsList[index].goods_id
              // 删除本地的商品
              deleteGoods(goods_id)
              // 根据索引从数组中删除
              this.goodsList.splice(index,1)

              // 判断是否为空
              this.isEmpty = this.goodsList.length === 0
          }
        }
      })
    },
    // 去结算
    goToOrder(){
        const ids = []
        this.goodsList.forEach(item=>{
            if (item.isSelect){
                ids.push(item.goods_id)
            }
        })

        if (ids.length === 0){
            mpvue.showToast({
              title: '请选择商品结算', //提示的内容,
              icon: 'none', //图标,
              duration: 1000, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
            });
            return
        }

        // 通过编程式导航跳转过去了
        mpvue.navigateTo({ url: `/pages/pay/main?ids=${ids.join(',')}` });
    }
  }
}
</script>

<style lang="less" scoped>
@PADDING-LEFT: 20rpx;
.empty-car {
  display: flex;
  flex-direction: column;
  height: 500rpx;
  justify-content: center;
  align-items: center;
  image {
    width: 125rpx;
    height: 124rpx;
  }
  &-tips {
    margin-top: 30rpx;
    font-size: 28rpx;
    color: #666;
  }
}
.extra {
  font-size: 24rpx;
  color: #999;
}
.shop-head {
  background-color: #fff;
  height: 88rpx;
  display: flex;
  align-items: center;
  padding: 0 @PADDING-LEFT;
  border-bottom: 1px solid #ddd;
  &-info {
    display: flex;
    align-items: center;
    .shop-name {
      margin-left: 10rpx;
    }
  }
}
.goods-item {
  height: 220rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding-left: @PADDING-LEFT;
  border-bottom: 1px solid #eee;
  &-pic {
    width: 160rpx;
    height: 160rpx;
    margin-left: 10rpx;
    border: 1px solid #ddd;
    padding: 10rpx;
    border-radius: 5rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  &-info {
    flex: 1;
    height: 180rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0rpx @PADDING-LEFT;
    &-title {
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    &-price {
      color: #ff2d4a;
      font-size: 30rpx;
    }
    &-edit {
      display: flex;
      justify-content: space-between;
      .outer {
        border: 1px solid #ddd;
        display: flex;
        align-items: center;
        border-radius: 5rpx;
        view {
          height: 50rpx;
          width: 50rpx;
          line-height: 50rpx;
          text-align: center;
        }
        .value {
          width: 65rpx;
          border-left: 1px solid #ddd;
        }
        .add {
          border-left: 1px solid #ddd;
        }
      }
    }
  }
}
.pubIcon {
  background: url(https://mcart.jiuxian.com/statics/images/cart/catIcon.png)
    no-repeat 0 0;
  background-size: 300rpx 300rpx;
  width: 55rpx;
  height: 55rpx;
}
.trueIcon {
  background-position: 0 -225rpx;
}
.falseIcon {
  background-position: -50rpx -225rpx;
}
.fixed-bar {
  display: flex;
  height: 98rpx;
  width: 750rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  .allselect {
    padding-left: @PADDING-LEFT;
    width: 200rpx;
    height: 98rpx;
    display: flex;
    align-items: center;
  }
  .statistics {
    flex: 1;
    display: flex;
    // align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .jiesuan {
    width: 200rpx;
    height: 98rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff2d4a;
    text {
      color: #fff;
    }
  }

  .disabled {
    background-color: #ddd;
  }
}
</style>

